<template>
  <div class="app-container">
    <h3>征集活动管理</h3>
    <div class="inputBox">
      <el-input v-model="search.name" class="input" placeholder="请输入征集活动名称" />
      <el-date-picker
        v-model="search.startTime"
        class="startDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择开始日期"/>
      <el-date-picker
        v-model="search.endTime"
        class="endDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择结束日期"/>
      <el-select v-model="search.status" placeholder="请选择征集活动状态">
        <el-option label="已开始" value="1" />
        <el-option label="已关闭" value="0" />
      </el-select>
      <el-button type="primary" class="ml10" @click="toSearch">查询</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>
    <el-button type="primary" style="margin-bottom:20px;" @click="add()">新建</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="征集活动名称">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="100">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="是否推荐" width="80">
        <!-- '推荐状态0->否;1->是' -->
        <template slot-scope="scope">
          <span v-if="scope.row.recommendStatus === 1">是</span>
          <span v-if="scope.row.recommendStatus === 0">否</span>
        </template>
      </el-table-column>
      <el-table-column :render-header="renderHeader" :label="'征集活动状态/( 小程序是否可见 )'" width="">
        <!-- 报名状态 0->关闭；1->开启' -->
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">已开启</span>
          <span v-if="scope.row.status === 0">已关闭</span>
        </template>
      </el-table-column>
      <el-table-column :render-header="renderHeader" :label="'上传作品状态/( 控制能否上传作品 )'">
        <!-- 报名开启状态 0->开始；1->结束' -->
        <template slot-scope="scope">
          <span v-if="scope.row.openStatus === 1">开始</span>
          <span v-if="scope.row.openStatus === 0">结束</span>
        </template>
      </el-table-column>
      <el-table-column label="显示隐藏数量" width="110">
        <!-- 显示隐藏数量 0->隐藏；1->显示' -->
        <template slot-scope="scope">
          <span v-if="scope.row.showNumStatus === 1">显示</span>
          <span v-if="scope.row.showNumStatus === 0">隐藏</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="230" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="editStatusFn(scope.row)">
            操作
          </el-button>
          <!-- <el-button
            :type="scope.row.status == 1 ? 'danger' : 'success'"
            size="mini"
            @click="changeStatus(scope.row.id, scope.row.status)">{{ scope.row.status == 1 ? "关闭" : "开启" }}</el-button> -->
          <el-button
            v-if="scope.row.status === 1"
            :type="scope.row.recommendStatus == 1 ? 'danger' : 'success'"
            size="mini"
            @click="changeRecommendStatus(scope.row.id, scope.row.recommendStatus)">{{ scope.row.recommendStatus == 1 ? "下推荐" : "上推荐" }}</el-button>
          <el-button
            size="mini"
            type="warning"
            @click="detail(scope.$index)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="toSearch" />
    <EditStatus
      :dialog-visible.sync="dialogVisible"
      :status-json="rowData"
      :dialog-loading.sync="dialogLoading"
      mode="activity"
      @resData="confirmFn"/>
  </div>
</template>

<script>
import EditStatus from '@/components/registry'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import { getActivityList, ActivityEditStatus, ActivityEditRecommendStatus, editShowNumStatus, editOpenStatus } from '@/api/activity'

export default {
//   components: { Pagination, detail, remark, remarkPropt },
  components: { Pagination, EditStatus },
  data() {
    return {
      rowData: {},
      dialogVisible: false,
      dialogLoading: false,
      momList: [],
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      search: {
        name: '',
        startTime: '',
        endTime: '',
        status: '' // 0->关闭;1->开启 // 0->关闭；1->开启
      },
      priceData: {
        quantity: '',
        amountMoney: ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    // this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    confirmFn(resData) {
      if (this.getJsonObjLength(resData) <= 1) {
        this.dialogVisible = false
        return
      }
      this.dialogLoading = true
      ActivityEditStatus(resData).then(res => {
        if (res.code === '200') {
          setTimeout(() => {
            this.dialogLoading = false
            this.dialogVisible = false
            this.fetchData()
          }, 500)
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    getJsonObjLength(jsonObj) {
      let Length = 0;
      for (const item in jsonObj) {
        Length++;
      }
      return Length;
    },
    editStatusFn(row) {
      this.rowData = row
      this.dialogVisible = true
    },
    renderHeader(h, { column }) {
      const header = column.label.split('/');
      return [h('span', [
        h('p', { style: { lineHeight: '20px', margin: '0' }}, header[0]),
        h('span', {}, header[1])
      ])];
    },
    detail(index) {
      const query = { isLook: true, data: this.list[index] }
      this.$router.push({
        path: 'add',
        query
      })
    },
    // 更新推荐状态
    changeRecommendStatus(id, status) {
      console.log(id, status)
      const strAsk = status === 0 ? '是否上推荐？' : '是否下推荐？'
      const str = status === 0 ? '已上推荐' : '已下推荐'
      this.$confirm(strAsk, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        status === 0 ? status = 1 : status = 0
        const data = { id, recommendStatus: status }
        ActivityEditRecommendStatus(data).then(res => {
          if (res.code === '200') {
            this.fetchData();
            this.$message({
              type: 'success',
              message: str
            });
          } else {
            Message.error(res.message + '-' + res.data)
          }
        })
      }).catch(() => {
      })
    },
    // 更新征集活动状态
    changeStatus(id, status) {
      console.log(id, status)
      const strAsk = status === 0 ? '是否开启？' : '是否关闭？'
      const str = status === 0 ? '已开启' : '已关闭'
      this.$confirm(strAsk, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        status === 0 ? status = 1 : status = 0
        const data = { id, status }
        ActivityEditStatus(data).then(res => {
          if (res.code === '200') {
            this.fetchData();
            this.$message({
              type: 'success',
              message: str
            });
          } else {
            Message.error(res.message + '-' + res.data)
          }
        })
      }).catch(() => {
      })
    },
    add() {
      this.$router.push({
        path: 'add',
        query: {}
      })
    },
    // 查询
    toSearch() {
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime && this.search.startTime.indexOf(' 00:00:00') === -1) this.search.startTime += ' 00:00:00'
      if (this.search.endTime && this.search.endTime.indexOf(' 23:59:59') === -1) this.search.endTime += ' 23:59:59'
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      getActivityList(newData).then(response => {
        // console.log('查询', response)
        if (response.code === '200') {
          this.list = response.data.list
          setTimeout(() => {
            this.listLoading = false
            this.total = response.data.total
          }, 0.5 * 1000)
        } else {
          Message.error(response.message + '-' + response.data)
        }
      })
    },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery)
      console.log('newData:=>', newData)
      getActivityList(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          console.log('订单数据：', this.list)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    },
    // 重置
    toReset() {
      this.search.name = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.status = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.totalDiv{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border:1px solid #EEE;
    border-top: none;
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
    .txt{
        color: #999;
    }

    .red {
        color: #a60807;
        margin-left: 10px;
    }
    .blue {
        color: #09c;
        margin-left: 4px;
    }
}
  .el-icon-remove {
    margin-left: 10px;
  }
  .img_url {
    width: 110px;
    height: 110px;
  }
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 160px;}
    .input:nth-of-type(2){ width: 140px;}
    .input:nth-of-type(3){ width: 160px;}
    .teacherType { width: 150px;}
    .teacherSex { width: 120px;}
    .startDate { width: 150px;}
    .endDate { width: 150px;}
    .teacherStatus { width: 150px;}
  }
</style>
